export default {
    state: () => ({

        // volume: 1,
        //  音量按钮是否处理按下状态
        volumeBtnFlag: false,
        // 音量进度条高度
        volumeParsent: window.localStorage.getItem("volumeParsent") === null ? 93 : window.localStorage.getItem("volumeParsent"),
        //  音量进度条按钮的top值
        volumeParsentBtn: window.localStorage.getItem("volumeParsentBtn") === null ? 0 : window.localStorage.getItem("volumeParsentBtn"),
        //  按下时的Y值以及移动后的Y值
        clientY: null,
        //  获取页面底部盒子元素
        floorElement: null,
        //  音量显示与隐藏开关
        volumeShow: false,

    }),
    getters: {
        //  音量进度条的高度
        volumeParsentHeight(state) {
            return state.volumeParsent + 'px';
        },
        //  音量进度条按钮的top值
        volumeParsentBtnTop(state) {
            return state.volumeParsentBtn + 'px';
        },
        //  音量
        volume(state) {
            return (state.volumeParsent / 93).toFixed(1)
        }
    },
    mutations: {
        changeVolume(state, value) {
            state.volume = value;
        },
        changeVolumeBtnFlag(state, value) {
            state.volumeBtnFlag = value;
        },
        changeClientY(state, value) {
            state.clientY = value;
        },
        changeParsnet(state, value) {
            //  1. 鼠标上下移动控制音量进度条的高度
            //  获取移动后的高度值

            const move = state.volumeParsent - (value - state.clientY);
            if (move > 93) {
                // 移动后的高度值超过93时,则值始终为93
                state.volumeParsent = 93;
                window.localStorage.setItem("volumeParsent", 93);

            } else if (move < 0) {
                // 移动后的高度值低于0时,则始终为0
                state.volumeParsent = 0;
                window.localStorage.setItem("volumeParsent", 0);
            } else {
                //  移动后的高度值小于等于93 或大于等于0时,直接将结果赋值音量进度条的高度
                state.volumeParsent = move;
                window.localStorage.setItem("volumeParsent", move);
            }
            //  将移动后的y轴进行保存
            state.clientY = value;
            // 2. 控制进度条按钮的top值
            //  改变进度条按钮的top值
            const movevolumeParsentBtn = 81 - (state.volumeParsent / 93 * 81);

            state.volumeParsentBtn = movevolumeParsentBtn;
            window.localStorage.setItem("volumeParsentBtn", movevolumeParsentBtn);

        },
        setFloorElement(state, value) {
            state.floorElement = value;
        },
        mouseUpchangeVolumeShow(state) {
            const body = document.body;
            // 解绑事件
            body.onmouseup = null;

            if (state.volumeShow) {
                //  当音量区域显示时执行
                //  判断mouseup是否在底部区域松开
                //   是在底部区域松开 则不需要隐藏音量区域
                //  不是在底部区域松开,则隐藏音量区域
                body.onmouseup = function (e) {
                    let element = e.target;
                    let flag = true;
                    while (flag) {
                        switch (element) {
                            case state.floorElement:
                                //  在底部区域松开,直接结束循环,不需要隐藏音量区域
                                flag = false;
                                break;
                            case body:
                                //  在body区域松开
                                //  隐藏音量区域
                                state.volumeShow = false;
                                // 结束循环
                                flag = false;
                                // 解绑事件
                                body.onmouseup = null;
                                break;

                            default:
                                element = element.parentNode;
                                break;
                        }
                    }
                }


            }

        },
        //  更改音量大小
        changeVolumeShow(state, value) {
            state.volumeShow = value;
        }

    }
}